<template>
    <div class="sharefoot">
      <ul class="sideUl">
        <li class="white" @click="lyn('')">
          我是领克
          <ul class="iamLyn" v-show="this.$store.state.lyn===true">
            <router-link to="/meetLynk"><li @click.stop="change()">遇见领克</li></router-link>
            <li @click.stop="">新闻潮汛</li>
            <li @click.stop="">品牌活动</li>
            <li @click.stop="">成为经销商</li>
          </ul>
        </li>
        <li class="white" @click="kinds('')">
          全系车型
          <ul class="kinds" v-show="this.$store.state.kinds===true">
            <li @click.stop="">01</li>
            <li @click.stop="">01PHEV</li>
            <li @click.stop="">01HEV</li>
            <li @click.stop="">02</li>
            <li @click.stop="">02PHEV</li>
            <li @click.stop="">03</li>
            <li @click.stop="">03+</li>
            <li @click.stop="">03PHEV</li>
            <li @click.stop="">05</li>
            <li @click.stop="">06</li>
            <li @click.stop="">智能科技</li>
          </ul>
        </li>
        <li class="white" @click="buy('')">
          即刻购车
          <ul class="buy" v-show="this.$store.state.buy===true">
            <li @click.stop="">领克商城</li>
            <li @click.stop="">灵活用车</li>
            <li @click.stop="">经销商查询</li>
            <li @click.stop="">试乘试驾</li>
          </ul>
        </li>
        <li class="white" @click="server('')">
          智享服务
          <ul class="serve" v-show="this.$store.state.server===true">
            <li @click.stop="">首任车主 终身质保</li>
            <li @click.stop="">终身道路教授</li>
            <li @click.stop="">服务活动</li>
            <li @click.stop="">原厂糖装附件</li>
            <li @click.stop="">原厂纯正零件</li>
            <li @click.stop="">废旧动力电池回收公示</li>
          </ul>
        </li>
        <li class="white" @click="club()">
          Co:Club
          <ul v-show="this.$store.state.club===true">
            <li @click.stop="">咨讯</li>
            <li @click.stop="">Co乐</li>
            <li @click.stop="">Co商城</li>
          </ul>
        </li>
        <li class="white">WTCR</li>
        <li class="white">Co:Lab</li>
<!--        <li>加入我们</li>-->
<!--        <li>联系我们</li>-->
<!--        <li>网站地图</li>-->
      </ul>
      <ul class="after">
        <li>成为经销商</li>
        <li>联系我们</li>
        <li>加入我们</li>
        <li>网站地图</li>
        <li>隐私政策</li>
      </ul>
      <p class="num">
        <img src="../../assets/images/share/number.jpg" alt="">
      </p>
      <p class="adress">
        2013 浙江吉利控股集团有限公司 版权所有 浙江ICP备11045738号
      </p>
      <p class="gongwang">
        <img src="../../assets/images/share/police.png" alt="">
        <span>浙公网安备 33010802009900号</span>
      </p>
      <div class="pic">
        <img src="../../assets/images/share/weibo.png" alt="">
        <img src="../../assets/images/share/wechat.png" alt="">
      </div>
    </div>
</template>

<script>
    export default {
        name: "shareFoot",
      methods:{
        lyn(a){
          this.$store.commit('lyn');
          this.$store.state.kinds=false;
          this.$store.state.buy=false;
          this.$store.state.server=false;
          this.$store.state.bd=a;
          // console.log(this.$store.state.list[0].bd);
          // console.log(this.$store.state.bd);
          // console.log(111)

        },
        kinds(a){
          this.$store.commit('kinds');
          this.$store.state.lyn=false;
          this.$store.state.buy=false;
          this.$store.state.server=false;
          this.$store.state.bd=a;
          console.log(222)
        },
        buy(a){
          this.$store.commit('buy');
          this.$store.state.kinds=false;
          this.$store.state.lyn=false;
          this.$store.state.server=false
          this.$store.state.bd=a;
        },
        server(a){
          this.$store.commit('server');
          this.$store.state.kinds=false;
          this.$store.state.buy=false;
          this.$store.state.lyn=false;
          this.$store.state.bd=a;
        },
        club(a){
          this.$store.commit('club');
          this.$store.state.kinds=false;
          this.$store.state.buy=false;
          this.$store.state.lyn=false;
          this.$store.state.bd=a;
        },
        change(){
          this.$store.state.msg=false;
          this.$store.state.bd='';
          this.$store.state.lyn=false;
          // console.log(this.$store.state.msg)
        }
      }
    }

</script>

<style scoped>
  a{
    text-decoration: none;
  }
  .sharefoot{
    overflow: hidden;
    padding-top: 50px;
    background: black;
  }
  .sharefoot .sideUl{
    width: 100%;
    /*position: fixed;*/
    bottom:50px;
    right: 0;
    background: black;
    /*opacity: 0.85;*/
    z-index: 5;
    /*display: none;*/
  }
  .sharefoot .sideUl li{
    width: 100%;
    float: none;
    font-size: 12px;
    display: block;
    text-align: left;
    line-height: 40px;
    color:grey;
    position: relative;
    margin: 0 50px;
  }
  .sharefoot .sideUl ul li{
    margin: 0 20px;
  }
  .sharefoot .sideUl>li::before{
    content: "";
    position: absolute;
    width: 136%;
    height: 0.2px;
    background: grey;
    left: -50px;
    top:-2px;
  }
  .sharefoot .sideUl .white{
    color: white;
  }
  .sharefoot .sideUl .liOne span{
    position: relative;
    top:-15px;
    left: 20px;
  }
  .sharefoot .after{
    margin-left: 50px;
  }
  .sharefoot .after li{
    list-style: none;
    float: left;
    vertical-align: middle;
    height: 40px;
    width: 33.33%;
    text-align: left;
    font-size: 12px;
    color: grey;
    margin: 0;
  }
  .num{
    margin-top: 10px;
  }
  .adress{
    font-size: 12px;
    color: grey;
    margin: 20px auto;
  }
  .gongwang{
    font-size: 12px;
    color: grey;
  }
  .pic {
    margin-top: 20px;
    margin-bottom: 70px;
  }
  .pic img{
    margin: 0 10px;
  }
</style>
